<template>
    <div class="app-container">
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="版本号">
          <el-input v-model="queryParams.versionNumber" placeholder="请输入版本号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selectFn">查询</el-button>
          <el-button @click="resetFn">重置</el-button>
        </el-form-item>
      </el-form>
      <el-card>
        <el-row  style="margin-bottom: 20px;">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"

            >新增</el-button>
          </el-col>
        </el-row>
         <!--    列表    -->
        <el-table v-loading="loading" :data="apkList"  border>
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="版本名称" align="center" prop="versionName" />
          <el-table-column label="版本号" align="center" prop="versionNumber" />
          <el-table-column label="发布时间" align="center" prop="releaseTime" />
          <el-table-column label="备注" align="center" prop="remark" />
        </el-table>
          <!-- 新增页面        -->
        <el-dialog title="新增apk" :visible.sync="open" width="55%" append-to-body>
          <el-form ref="form" inline  :model="form" :rules="rules" label-width="140px">
            <el-form-item label="版本名称" prop="versionName" >
              <el-input   v-model="form.versionName"  placeholder="请输入版本名称" />
            </el-form-item>
            <el-form-item label="版本号" prop="versionNumber" >
              <el-input   v-model="form.versionNumber" placeholder="请输入版本号" />
            </el-form-item>
            <el-form-item label="上传文件" style="margin-right: 112px" prop="download" >
              <span class="fileinput-button">
                   <span v-if="!form.download">上传</span>
                   <span v-else>已上传</span>
                    <input
                      type="file"
                      ref="uploadFile"
                      @change="changeFile"
                    />
              </span>
            </el-form-item>
            <el-form-item label="版本描述" prop="versionDescription" >
              <el-input   v-model="form.versionDescription" placeholder="请输入版本描述" />
            </el-form-item>
            <el-form-item label="发布时间" prop="releaseTime" >
<!--              <el-date-picker type="date" placeholder="请选择发布时间" v-model="form.releaseTime" style="width: 100%;"></el-date-picker>-->
              <el-input disabled="true"    v-model="form.releaseTime"  placeholder="请输入发布时间" />
            </el-form-item>
            <el-form-item label="备注" prop="remark" >
              <el-input   v-model="form.remark"  placeholder="请输入备注" />
            </el-form-item>

          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button @click="open=false">取 消</el-button>
              <el-button type="primary" @click="add">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
     </div>
</template>

<script>
import {getVersion,addApk,addVersion} from '@/api/module/apkrenew'
export default {
  name: "apkrenew",
  data(){
    return {
      form:{
        versionName:'',
        versionNumber:'',
        versionDescription:'',
        releaseTime:'',
        remark:'',
        download:'',
      },
      open:false,
      rules:{
        versionName: [
          { required: true, message: '请输入版本名称', trigger: 'change,blur' }
        ],
        versionNumber: [
          { required: true, message: '请输入版本号', trigger: 'change,blur' }
        ],
        download: [
          { required: true, message: '请上传文件', trigger: 'change,blur' }
        ],
        versionDescription: [
          { required: true, message: '请输入版本名称', trigger: 'change,blur' }
        ],
      },
      apkList:[],
      // 遮罩层
      loading: true,
      queryParams:{
        pageNum: 1,
        pageSize: 10,
      }


    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList(){
      this.loading = true;
      getVersion(this.queryParams).then(response=>{
        console.log(response)
        this.apkList=response.rows
        }
      )
      this.loading = false;

    },
    handleAdd(){
      this.reset();
      this.open=true
      this.form.releaseTime=this.getTime()
    },
    reset(){
      this.form={
        versionName:'',
        versionNumber:'',
        versionDescription:'',
        releaseTime:'',
        remark:'',
        download:'',
      }
    },
    //查询
    selectFn(){
      this.getList()
    },
    /** 重置*/
    resetFn(){},
    //获取当前时间
    getTime(){
      var date = new Date();
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
      var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
      var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
      var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
      var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
      return Y+M+D+h+m+s;
    },
    add(){
      const  _this=this
      this.$refs["form"].validate(valid => {
        if (valid) {
            if(_this.form.download){
              _this.$message("当前正在上传，请稍等！")
              return false
            }
            addVersion(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
        }
      })
    },
    changeFile(event){
      let  _this=this
      // 获取上传的文件
      var files = this.$refs.uploadFile.files[0];
      console.log(files)
      // 判断上传的文件是否是 以apk结尾的apk文件
      if (files.name.substr(files.name.length - 3) === "apk") {
        console.log('apk')
        const   formdata = new FormData();
        formdata.append("file", files);
        console.log(formdata)
        addApk(formdata).then(res=>{
          console.log(res)
          _this.form.download=res.data.visitUrl
          _this.$message.success("上传成功！")
        })
          .catch((err)=>{
          console.log(err)
        })

      } else {
        this.$message({
          type: "error",
          message: "请上传apk文件",
        });
      }

    }
  }
}
</script>

<style scoped>
.fileinput-button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width:100px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  font-size: 15px;
  border-radius: 5px;
  background-color: #1890ff;
}


.fileinput-button input{
  position:absolute;
  right: 0px;
  top:0px;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
  font-size: 200px;;
}

</style>
